<template>
  <div class="freeOrderList pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入用户名称"
              class="w-200"
              clearable
              @clear="initTableData" />
    <el-button type="primary"
               @click="initTableData">查 询</el-button>
    <!--服务包列表-->
    <Table stripe
           border
           :columns="titles"
           :data="dataList"
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="configService(index)">配置</span>
        <span @click="handleRender(index)">驳回</span>
      </template>
    </Table>
    <!--分页-->
    <Page :current.sync="currentPage"
          :total="totals"
          :page-size="pageSize"
          @on-change="handleChange"
          show-total />

    <Modal v-model="configDoctorView"
           width="80%"
           title="订单医生配置"
           @on-ok="saveData">
      <div>
        医生名称：
        <el-input v-model="configDoctor.nickName"
                  placeholder="请输入医生名称"
                  class="w-200" />
        医生报酬：
        <el-input v-model="configDoctorMoney"
                  placeholder="请输入医生报酬"
                  class="w-200" />
        <el-input v-model="doctorName"
                  placeholder="请输入医生名称"
                  class="w-200" />
        <el-button type="primary"
                   @click="configService">查 询</el-button>
        <div class="bg_f mt-20">
          <Table border
                 :columns="doctorTitle"
                 :data="doctorList">
            <template slot-scope="{row,index}"
                      slot="action">
              <span @click="setDoctor(index)"
                    style="font-size: 20px;color: #00A539">
                <Icon type="ios-build" />
              </span>
            </template>
          </Table>
          <Page :current.sync="dcurrentPage"
                :total="dtotals"
                :page-size="dpageSize"
                @on-change="configService"
                show-total />
        </div>
      </div>
    </Modal>
    <Modal width="600px"
           v-model="imageModal"
           class-name="vertical-center-modal">
      <img :src="imageUrl"
           width="570px"
           height="570px" />
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "applyFreeOrderList",
    data () {
      return {
        imageModal: false,
        imageUrl: null,
        searchCondition: "",
        doctorName: "",
        currentPage: 1,
        totals: 0,
        pageSize: 15,
        dcurrentPage: 1,
        dtotals: 0,
        dpageSize: 10,
        configDoctorView: false,
        configDoctorMoney: 0,
        reasion: '',
        titles: [
          {
            title: '用户名 ',
            key: 'nickName',
          },
          {
            title: '登录名 ',
            key: 'loginName',
          },
          {
            title: '操作员 ',
            key: 'adminName',
          },
          {
            title: '服务类型 ',
            key: 'serviceType',
            render: (h, params) => {
              let serviceType = params.row.serviceType;
              if (serviceType == 1) {
                return h('div', [
                  h("div", [h('span', "图文咨询")]),
                ]);
              } else if (serviceType == 3) {
                return h('div', [
                  h("div", [h('span', "视频咨询")]),
                ]);
              } else if (serviceType == 9) {
                return h('div', [
                  h("div", [h('span', "语音咨询")]),
                ]);
              } else if (serviceType == 13) {
                return h('div', [
                  h("div", [h('span', "服务包咨询")]),
                ]);
              }
            }
          },
          {
            title: '次数 ',
            key: 'freeCount',
          },
          {
            title: '状态 ',
            key: 'status',
            render: (h, params) => {
              let status = params.row.status;
              if (status == 0) {
                return h('div', [
                  h("div", [h('span', "待配置")]),
                ]);
              } else if (status == 1) {
                return h('div', [
                  h("div", [h('span', "已配置")]),
                ]);
              } else if (status == -1) {
                return h('div', [
                  h("div", [h('span', "已驳回")]),
                ]);
              }
            }
          },
          {
            title: '备注 ',
            key: 'remark',
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 120
          }
        ],
        doctorTitle: [
          {
            title: '头像',
            key: 'headImageUrl',
            width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.headImageUrl
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    'border-radius': '50%'
                  },
                  on: {
                    click: (event) => {
                      this.showBigImage(params.row.headImageUrl);
                    }
                  }
                }),
              ]);
            }
          },
          {
            title: '医生 ',
            key: 'nickName',
            render: (h, params) => {
              if (!params.row.nickName) {
                params.row.nickName = "";
              }
              if (!params.row.positionName) {
                params.row.positionName = "";
              }
              return h('div', [
                h("div", [h('span', '登录名：' + params.row.loginName)]),
                h("div", [h('span', '昵称：' + params.row.nickName), h('span', "  (" + params.row.positionName + ")"),])
              ]);
            }
          }, {
            title: '专家 ',
            key: 'isExpert',
            width: 90,
            render: (h, params) => {
              if (params.row.isExpert === 0) {
                return h('div', [h('span', {
                  style: {
                    color: '#3B3E40'
                  }
                }, '非专家')]);
              } else if (params.row.isExpert === 1) {
                return h('div', [h('span', {
                  style: {
                    color: '#FFA949'
                  }
                }, '三甲专家')]);
              } else if (params.row.isExpert === 2) {
                return h('div', [h('span', {
                  style: {
                    color: '#2CB044'
                  }
                }, '专科专家')]);
              }
            }
          },
          {
            title: '性别 ',
            key: 'sex',
            width: 70,
            render: (h, params) => {
              if (params.row.sex === 0) {
                return h('div', [h('span', '女')]);
              } else if (params.row.sex === 1) {
                return h('div', [h('span', '男')]);
              }
            }
          },
          {
            title: '医院&科室',
            key: 'hospitalName',
            render: (h, params) => {
              if (params.row.hospitalName) {
                return h('div', [
                  h("div", [h('span', params.row.hospitalName)]),
                  h("div", [h('span', '(' + params.row.departmentName + ')')])
                ]);
              } else {
                return h('div', [
                  h('div', ""),
                ]);
              }
            }
          },
          {
            title: '审核状态',
            key: 'isAuth',
            width: 100,
            render: (h, params) => {
              if (params.row.isAuth == 0) {
                return h('div', [
                  h("span", {
                    style: {
                      color: '#3B3E40'
                    }
                  }, "待提交"),
                ]);
              } else if (params.row.isAuth == 1) {
                return h('div', [
                  h('span', {
                    style: {
                      color: '#005DF3'
                    }
                  }, "待审核"),
                ]);
              } else if (params.row.isAuth == 2) {
                return h('div', [
                  h('span', {
                    style: {
                      color: '#2CB044'
                    }
                  }, "通过"),
                ]);
              } else if (params.row.isAuth == -1) {
                return h('div', [
                  h('span', {
                    style: {
                      color: '#BB0000'
                    }
                  }, "驳回"),
                ]);
              }
            }
          },
          {
            title: '简介',
            key: 'introduce'
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 120
          }
        ],
        dataList: [],
        doctorList: [],
        configDoctor: {
          nickName: "",
          id: null,
        },
        currentApply: {}
      }
    },
    created () {
      this.initTableData();
    },
    methods: {
      showBigImage (url) {
        this.imageUrl = url;
        this.imageModal = true;
      },
      configService (index) {
        this.configDoctor = {
          nickName: "",
          id: null,
        };
        this.configDoctorMoney = 0;
        this.currentApply = this.dataList[index];
        let param = {
          nickName: this.doctorName,
          pageSize: this.dpageSize,
          pageIndex: this.dcurrentPage - 1
        };
        this.post(this.api.doctorManager.list, param).then((res) => {
          if (res.data.code === '200') {
            this.doctorList = res.data.object;
            this.dtotals = res.data.totalNum;
          }
        });
        this.configDoctorView = true;
      },
      setDoctor (index) {
        this.configDoctor = this.doctorList[index];
      },
      saveData (index) {
        let vm = this;
        let doctorId = this.configDoctor.id;
        let id = this.currentApply.id;
        let param = {
          id: id,
          doctorId: doctorId,
          money: this.configDoctorMoney
        };
        this.post(this.api.interpretation.configService, param).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
          }
        });
      },
      handleChange (page) {
        this.currentPage = page;
        this.initTableData();
      },
      initTableData () {
        let pageIndex = this.currentPage - 1;
        let param = {
          name: this.searchCondition,
          pageSize: this.pageSize,
          pageIndex: pageIndex
        };
        this.post(this.api.interpretation.getUserFreeAdvisory, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          }
        });
      },
      handleRender (index) {
        let vm = this;
        this.currentApply = this.dataList[index];
        this.$Modal.confirm({
          onOk: () => {
            vm.overrule();
          },
          onCancel: () => {
            vm.cancel();
          },
          render: (h) => {
            return h('Input', {
              props: {
                value: this.reasion,
                autofocus: true,
                placeholder: '请输入驳回原因'
              },
              on: {
                input: (val) => {
                  this.reasion = val;
                }
              }
            })
          }
        })
      },
      overrule () {
        let id = this.currentApply.id;
        let reasion = this.reasion;
        if (!reasion || reasion.length == 0) {
          this.$Message.error("驳回原因不能为空");
          return;
        }
        let param = {
          id: id,
          remark: reasion
        };
        this.post(this.api.interpretation.overrule, param).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
            this.cancel();
          }
        });
      },
      cancel () {
        this.currentApply = null;
        this.reasion = "";
      },
    }
  }
</script>

<style scoped>
</style>
